<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>

<body>
    <canvas style='border: 1px solid #ccc;' width='600' height='400' id='mycanvas'></canvas>
</body>
<script>
    let canvas = document.getElementById('mycanvas')
    let ctx = canvas.getContext('2d')

    var Point = function (x, y) {
        return {
            x: x,
            y: y
        };
    };

    function Rect(x, y, w, h) {
        return {
            x: x,
            y: y,
            width: w,
            height: h
        };
    }

    var rect = Rect(50, 50, 300, 100);
    var gradient = ctx.createLinearGradient(120, 0, 250, 0);
    gradient.addColorStop("0", "red");
    gradient.addColorStop("0.5", "lime");
    gradient.addColorStop("1.0", "yellow");

    // Fill with gradient
    drawRoundedRect(rect, 50, ctx, gradient);

    function drawRoundedRect(rect, r, ctx, gradient) {
        var ptA = Point(rect.x + r, rect.y);
        var ptB = Point(rect.x + rect.width, rect.y);
        var ptC = Point(rect.x + rect.width, rect.y + rect.height);
        var ptD = Point(rect.x, rect.y + rect.height);
        var ptE = Point(rect.x, rect.y);
        ctx.beginPath();
        ctx.moveTo(ptA.x, ptA.y);
        ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r);
        ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r);
        ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, r);
        ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r);
        ctx.closePath()
        ctx.strokeStyle = gradient
        // ctx.strokeRect(100, 100, 300, 200)
        ctx.stroke();
    }
</script>

</html>